<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-03 15:37:10
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-04 10:28:16
 * @FilePath: \hy-ui\src\views\taskMassage\components\project\components\projectScreeningCom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="projectScreenCom">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>项目筛选</span>
        <i class="el-icon-close" @click="close"></i>
      </div>
      <div style="padding: 12px 20px; min-height: 78vh; overflow: auto">
        <el-form label-position="top" label-width="120px">
          <el-form-item label="人员筛选">
            <el-select
              v-model="form.people"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in list"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理员筛选">
            <el-select
              v-model="form.admin"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in list"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listUser } from "@/api/system/user.js";
export default {
  components: {},
  props: {
    close: {
      type: Function,
      default: () => {},
    },
    form: {
      type: Object,
      default: () => {
        return {
          people: [],
          admin: [],
        };
      },
    },
  },
  data() {
    return {
      list: [],
    };
  },
  async mounted() {
    const res = await listUser({
      pageNum: 1,
      pageSize: 9999,
      status: "0",
      userType: "front_user",
    });
    this.list = res.rows;
  },
};
</script>

<style lang="scss" scoped>
.projectScreenCom {
  width: 100%;
  ::v-deep .el-card__header {
    display: flex;
    align-items: center;
  }
  ::v-deep .clearfix {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    &::after {
      display: none;
    }
    .el-icon-close {
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>